<template>
	<div>
		<el-dialog title="信号定义" width="700px" draggable v-bind="$attrs">
			<div class="p-b-10">
				<my-button type="primary" @click="formData.signal.push({})" icon="Plus">新增</my-button>
			</div>
			<el-form ref="formRef" :model="formData" label-width="0" inline-message>
				<my-table
					:data="formData.signal"
					:columns="[
						{
							label: 'scope',
							prop: 'scope'
						},
						{
							label: 'id',
							prop: 'id'
						},
						{
							label: '名称',
							prop: 'name'
						},
						{
							label: '操作',
							fixed: 'right',
							width: '70'
						}
					]"
					height="250"
				>
					<template #scope="{ row, $index, prop }">
						<el-form-item
							:prop="`signal.${$index}.${prop}`"
							:rules="[{ required: true, message: '请选择', trigger: ['blur', 'change'] }]"
							v-if="$index >= 0"
						>
							<my-select
								v-model="row[prop]"
								:list="[
									{ label: '全局', value: 'start' },
									{ label: '流程实例', value: 'end' }
								]"
								:fileType="{ label: 'label', value: 'value' }"
							/>
						</el-form-item>
					</template>
					<template #id="{ row, $index, prop }">
						<el-form-item
							:prop="`signal.${$index}.${prop}`"
							:rules="[{ required: true, message: '请输入', trigger: ['blur', 'change'] }]"
							v-if="$index >= 0"
						>
							<my-input v-model="row[prop]" />
						</el-form-item>
					</template>
					<template #name="{ row, $index, prop }">
						<el-form-item
							:prop="`signal.${$index}.${prop}`"
							:rules="[{ required: true, message: '请输入', trigger: ['blur', 'change'] }]"
							v-if="$index >= 0"
						>
							<my-input v-model="row[prop]" />
						</el-form-item>
					</template>
					<template #default="{ $index }">
						<my-button-text @click="formData.signal.splice($index)">删除</my-button-text>
					</template>
				</my-table>
			</el-form>
			<template #footer>
				<my-button @click.prevent="$attrs['onUpdate:modelValue'](false)">取 消</my-button>
				<el-button type="primary" @click.prevent="() => closeDialog().then(() => $attrs['onUpdate:modelValue'](false))">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import hooksPanel, { PanelProps } from '../../common/Panel';

const props = defineProps({
		...PanelProps
	}),
	{ formData, updateProperties } = hooksPanel(props);

onMounted(() => {
	formData.value.signal =
		props.element.businessObject.extensionElements?.values
			.filter((item) => item.$type === 'bpmn:Signal')
			.map((item) => {
				return {
					scope: item.scope,
					id: item.id,
					name: item.name
				};
			}) ?? [];
});

function updateElement() {
	if (formData.value.signal?.length) {
		let extensionElements = props.element.businessObject.get('extensionElements');
		if (!extensionElements) {
			extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
		}
		// 清除旧值
		extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'bpmn:Signal') ?? [];
		formData.value.signal.forEach((item) => {
			const signal = props.modeler.get('moddle').create('bpmn:Signal');
			signal['scope'] = item.scope;
			signal['id'] = item.id;
			signal['name'] = item.name;
			extensionElements.get('values').push(signal);
		});
		updateProperties({ extensionElements });
	} else {
		const extensionElements = props.element.businessObject[`extensionElements`];
		if (extensionElements) {
			extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'bpmn:Signal') ?? [];
		}
	}
}

const formRef = ref(null);
function closeDialog() {
	return formRef.value
		.validate()
		.then(() => {
			updateElement();
		})
		.catch((e) => console.error(e));
}
</script>
